<template>
	<div class="repeat-and-blur-warppwe">
		<template v-for="(item, index) in options">
			<AiSpeak
				:key="item"
				:rules="rules.words"
				:textArea="hasAiSpeakTextArea"
				:label="'AI说'"
				:variableIcon="true"
				placeholder="请输入AI客服播报的话术"
				:value="item.words"
				@input="(prop, e) => input('words', e, index)"
				@clearVideo="clearVideo(index, 'wordsVideo')"
				:video="item.wordsVideo"
				:prop="`${prop}_${index}_words`"
				:validateStatus="item.wordsVideoValidate"
				@onAddVariable="onAddVariable(`${prop}_${index}_words`, index)"
				@showVideoTable="showVideoTable(index, 'wordsVideo')"
				:showDetail="showDetail"
			/>
			<AiSpeak
				:key="item"
				:label="'最大允许次数'"
				placeholder="允许用户其他回答的最大次数"
				:variableIcon="false"
				:required="true"
				:value="item.wordsTimesMax"
				@input="(prop, e) => input('wordsTimesMax', e, index)"
				:prop="`${prop}.${index}.wordsTimesMax`"
				:rules="rules.wordsTimesMax"
				:maxlength="2"
				:maxTips="true"
			/>
			<NextStepTemplate
				:key="item"
				:showDetail="showDetail"
				:value="item.nextStep"
				:nextStepOption="nextStepOption"
				@onChange="(prop, val) => onChange('nextStep', val, index)"
				:prop="`${prop}.${index}.nextStep`"
				:rules="rules.nextStep"
			/>
			<AiSpeak
				:key="item"
				:rules="rules.wordsEnd"
				:textArea="hasAiSpeakTextArea"
				:label="'AI说'"
				:variableIcon="true"
				placeholder="请输入AI客服播报的话术"
				:value="item.wordsEnd"
				:prop="`${prop}_${index}_wordsEnd`"
				@input="(prop, e) => input('wordsEnd', e, index)"
				@clearVideo="clearVideo(index, 'wordsEndVideo')"
				:video="item.wordsEndVideo"
				:validateStatus="item.wordsEndVideoValidate"
				@onAddVariable="onAddVariable(`${prop}_${index}_wordsEnd`, index)"
				@showVideoTable="showVideoTable(index, 'wordsEndVideo')"
				:showDetail="showDetail"
			/>
		</template>

		<VideoTable
			v-if="tableVideoDialog"
			:tableVideoDialog="tableVideoDialog"
			:videoType="tableVideoType"
			:videoSlect="selectVideoIndex"
			@ok="sureVideoData"
			@cancel="cancelVideoData"
			:showDetail="showDetail"
		/>
		<!-- 用户变量 -->
		<UserAttribute v-if="isShowUserAttribute" :dialogVisible="isShowUserAttribute" @on-ok="onChosseUserAttribute" @on-cancel="onCloseUserAttribute" />
	</div>
</template>

<script>
import AiSpeak from '../AiSpeak/index.vue';
import NextStepTemplate from './NextStepTemplate.vue';
import UserAttribute from './UserAttribute.vue';
import VideoTable from '@/views/components/VideoTable.vue';
import { insertStr } from '@/utils/tool';
export default {
	components: {
		AiSpeak,
		NextStepTemplate,
		UserAttribute,
		VideoTable
	},

	watch: {
		value: {
			handler(val) {
				this.options = [...val];
			},
			deep: true
		}
	},

	mounted() {
		this.$nextTick(() => {
			this.options = [...this.value];
		});
	},
	computed: {
		showVideoId() {
			let id = null;

			if (this.options[0][this.currentProp] && this.options[this.currentProp].id) {
				id = this.options[0][this.currentProp].id;
			}

			return id;
		}
	},
	data() {
		const vaildateWordsVideo = (rule, value, callback) => {
			this.options.map(option => {
				if (option.words && !option.wordsVideo) {
					option.wordsVideoValidate = false;
					return callback(new Error('请选择播报视频'));
				}
				option.wordsVideoValidate = true;
				return callback();
			});
		};
		const vaildateWordsEndVideo = (rule, value, callback) => {
			this.options.map(option => {
				if (option.wordsEnd && !option.wordsEndVideo) {
					option.wordsEndVideoValidate = false;
					return callback(new Error('请选择播报视频'));
				}
				option.wordsEndVideoValidate = true;
				return callback();
			});
		};
		return {
			options: [],
			currVariableindex: null,
			inputCurrIndex: null,
			currentVideoProp: null,
			isShowUserAttribute: false,
			tableVideoDialog: false,
			selectVideoIndex: null,
			rules: {
				words: [{ validator: vaildateWordsVideo, trigger: ['blur', 'change'] }],
				wordsEnd: [{ validator: vaildateWordsEndVideo, trigger: ['blur', 'change'] }],
				nextStep: [
					{
						required: true,
						message: '请选择下一步操作',
						trigger: 'change'
					}
				],
				wordsTimesMax: [
					{
						required: true,
						message: '请输入允许用户其他回答的最大次数',
						trigger: ['blur', 'change']
					}
				]
			}
		};
	},
	props: {
		prop: {
			type: String,
			required: true,
			default: () => ''
		},
		value: {
			type: Object,
			required: true,
			default: () => []
		},
		hasAiSpeakTextArea: {
			type: Boolean,
			default: () => false
		},
		nextStepOption: {
			type: Array,
			required: true,
			default: () => []
		}
	},
	methods: {
		input(prop, e, index) {
			// this.form[prop] = e;
			console.log(prop, e, index);
			this.options[index][prop] = e;
			this.$emit('input', this.prop, this.options);
		},
		onChange(prop, val, index) {
			this.options[index][prop] = val;
			this.$emit('input', this.prop, this.options);
		},
		onChosseUserAttribute(data, businessData) {
			console.log('onChosseUserAttribute', data, this.currentProp);
			let wordsDom = document.getElementById(this.currentProp);
			if (!wordsDom) {
				wordsDom = document.getElementById(this.currentProp+'textarea');
			}
			const current = this.currentProp.split('_');
			let variable = ''
			if (data && data.bizscenario_role && data.bizscenario_role.name) {
				variable =  `{{客户信息_${data.bizscenario_role.name}_${data.name}_${data.id}}}`;
				this.options[this.currVariableindex][`${current[2]}VariableId`] = data.id;
				this.options[this.currVariableindex][`${current[2]}Variables`].push(data);
			} else {
				variable =  `{{业务信息_${businessData.name}_${businessData.id}}}`;
				this.options[this.currVariableindex][`${current[2]}VariableId`] = businessData.id;
				this.options[this.currVariableindex][`${current[2]}Variables`].push(businessData);
			}

			this.options[this.currVariableindex][current[2]] = insertStr(this.options[this.currVariableindex][current[2]], wordsDom, variable);

			this.inputCurrIndex = this.currVariableindex;
			console.log(this.options);
			this.isShowUserAttribute = false;
			this.$emit('input', this.prop, this.options);
		},
		showVideoTable(index, prop) {
			if (this.options[index][prop]) {
				this.selectVideoIndex = this.options[index][prop].id;
			} else {
				this.selectVideoIndex = null;
			}
			this.inputCurrIndex = index;
			this.currentVideoProp = prop;

			this.tableVideoDialog = true;
			console.log(this.options);
		},
		cancelVideoData() {
			this.tableVideoDialog = false;
		},
		sureVideoData(id, video) {
			this.options[this.inputCurrIndex][this.currentVideoProp] = video;
			this.tableVideoDialog = false;
		},
		clearVideo(index, prop) {
			console.log(this.options);
			this.options[index][prop] = '';
			this.$emit('input', this.prop, this.options);
		},
		onAddVariable(prop, index) {
			console.log(prop, index);
			this.isShowUserAttribute = true;
			this.currentProp = prop;
			this.currVariableindex = index;
		},

		onCloseUserAttribute() {
			this.isShowUserAttribute = false;
		}
	}
};
</script>

<style></style>
